import 'package:flutter/material.dart'; //importM

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
          backgroundColor: Colors.blue,
        ),
        body: Column(
          spacing: 50,
          children: [MyApp(), MyList(), CircleImg()], //MyButton(),
        ),
      ),
    ),
  );
}
//组件前加const 例：const Text(), 性能优化：在编译时就会实例化组件，多个重复的const组件会公用一个存储空间，
//限制：const组件的属性值必须是编译时常量，组件必须是无状态组件

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        width: 200,
        height: 200,
        // transform: Matrix4.translationValues(0, -100, 0),//平移属性 x,y,z
        transform: Matrix4.rotationZ(0.5), //旋转属性 沿左上角顺时针旋转
        // margin: EdgeInsets.only(top: 20),
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          gradient: const LinearGradient(colors: [Colors.blue, Colors.red]),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: Colors.black, width: 2),
          boxShadow: const [BoxShadow(color: Colors.black, blurRadius: 10)],
        ),

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // spacing: 20,
          children: const [
            Text('Hello', style: TextStyle(fontSize: 20, color: Colors.white)),
            Text('World', style: TextStyle(fontSize: 20, color: Colors.black)),
            Image(image: AssetImage('.././web/favicon.png')),
          ],
        ),
      ),
    );
  }
}

// class MyButton extends StatelessWidget {
//   const MyButton({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       width: 200,
//       height: 50,
//       alignment: Alignment.center,
//       decoration: BoxDecoration(
//         color: Colors.blue,
//         borderRadius: BorderRadius.circular(20),
//       ),
//       margin: const EdgeInsets.all(20),
//       child: Text(
//         'button',
//         style: const TextStyle(
//           fontSize: 20,
//           color: Color.fromARGB(255, 177, 166, 166),
//         ),
//       ),
//     );
//   }
// }

class MyList extends StatelessWidget {
  const MyList({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.green,
      child: ListView(
        //设置宽高，会报错，因为ListView会自动填充父组件的宽高
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.blue,
            child: Text(
              '1VASDFADFGASDDDDDDDDDDDDDDDDCAXSFGVASDGF',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                fontSize: 20,
                color: Colors.white,
                fontWeight: FontWeight.bold,
                letterSpacing: 2, //字符间距
                decoration: TextDecoration.underline, //下划线
              ),
            ),
          ),
          Container(
            width: 50,
            height: 50,
            // color: Colors.red,
            // child: Image.network(//远程图片，本地图片为：assets 需要创建images文件夹，并在pubspec.yaml中配置解除assets的注释
            //   'https://ts1.tc.mm.bing.net/th/id/OIP-C.XS6EtBzAmWWa31cfFvcx6QHaHa?w=168&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc4&dpr=1.3&pid=3.1&rm=2',
            //   alignment: Alignment.center, //图片居中,在container中的位置
            //   // fit: BoxFit.cover,
            //   repeat: ImageRepeat.repeatX,
            // ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              image: DecorationImage(
                image: NetworkImage(
                  'https://ts1.tc.mm.bing.net/th/id/OIP-C.XS6EtBzAmWWa31cfFvcx6QHaHa?w=168&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc4&dpr=1.3&pid=3.1&rm=2',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class CircleImg extends StatelessWidget {
  const CircleImg({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      //裁剪为圆形
      child: Image.network(
        'https://ts1.tc.mm.bing.net/th/id/OIP-C.XS6EtBzAmWWa31cfFvcx6QHaHa?w=168&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc4&dpr=1.3&pid=3.1&rm=2',
        width: 50,
        height: 50,
        fit: BoxFit.cover, //图片填充方式
      ),
    );
  }
}
